<template>
	<view>
		<custom-header title="类型选择" />
		<view class="search_wrap">
			<view class="input_wrap">
				<up-input
					v-model.trim="keyword"
					placeholder="请输入鲜花名称"
					prefixIcon="search"
					shape="circle"
					clearable
					prefixIconStyle="font-size: 22px;color: #909399"
					customStyle="background:#F6F7F8;border:none;"
				></up-input>
			</view>
			<view class="input_btn" hover-class="custom_hover" :hover-stay-time="200" @click="handleSearch">
				搜索
			</view>
		</view>
		<view class="content_wrap">
			<scroll-view 
			:scroll-y="true"
			:style="{height:'calc(100vh - 115rpx - '+statusBarHeight+'px)'}"
			scroll-with-animation
			class="type_list_wrap">
				<view 
					class="list" 
					:class="{'active':type == item.id}"
					v-for="(item,index) in typeList" 
					:key="index"
					@click="handleSelectType(item)">
						{{ item.name }}
				</view>
			</scroll-view >
			<scroll-view
			:scroll-y="true"
			:style="{height:'calc(100vh - 115rpx - '+statusBarHeight+'px)'}"
			scroll-with-animation
			class="goods_list_wrap">
				<view class="no_data" v-if="!listData.length && listLoading != 'loading'">暂无数据</view>
				<view class="list_wrap" v-else-if="listData.length">
					<view 
						class="list" 
						v-for="(item,index) in listData" 
						:key="index"  
						hover-class="custom_hover" 
						:hover-stay-time="200"
						@click="handleSelectGood(item)">
						<view class="img">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop2.png" mode="widthFix"></image>
						</view>
						<view class="name">骄傲</view>
						<view class="za">规格：20支/扎</view>
					</view>
				</view>
				<view class="loading_wrap" v-if="listLoading == 'loading'">
					<up-loadmore
						:status="listLoading"
						iconSize="22"
						iconColor="#FF3316"
						loadingIcon='semicircle'
						loadingText=""
						/>
				</view>
			</scroll-view >
		</view>
		<!-- 自定义消息弹出层 -->
		<custom-popup
			:show="isShowToast" 
			:config="popupConfig"
			@confirm="isShowToast = false">
		</custom-popup>
	</view>
</template>

<script setup>
	import { ref,computed,onMounted } from 'vue'
	import { useStore } from 'vuex';
	const store = useStore();
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	// 消息弹出层
	const isShowToast = ref(false)
	const popupConfig = ref({})
	
	// 搜索
	const keyword = ref('')
	const handleSearch = ()=>{
		console.log(keyword.value)
		if(!keyword.value){
			popupConfig.value.message = '请输入鲜花名称'
			isShowToast.value = true
			return
		}
		loadGetListData()
	}
	
	// 侧边栏类型
	const typeList = ref([
		{ id:1,name:'全部' },
		{ id:'ppmg',name:'品牌玫瑰' },
		{ id:2,name:'单头玫瑰' },
		{ id:3,name:'多头玫瑰' },
		{ id:4,name:'百合' },
		{ id:5,name:'单头康花' },
		{ id:6,name:'洋桔梗' },
		{ id:7,name:'向日葵' },
		{ id:8,name:'满天星' },
		{ id:9,name:'叶材' },
		{ id:10,name:'进口花' },
		{ id:11,name:'百合1' },
		{ id:12,name:'单头玫瑰1' },
		{ id:13,name:'多头玫瑰1' },
		{ id:14,name:'百合2' },
		{ id:15,name:'单头康花1' },
		{ id:16,name:'洋桔梗1' },
		{ id:17,name:'向日葵1' },
		{ id:18,name:'满天星1' },
		{ id:19,name:'叶材1' },
		{ id:20,name:'进口花1' }
	])
	const type = ref(1)
	const handleSelectType = (item)=>{
		type.value = item.id
		loadGetListData()
	}
	
	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listLoading.value = 'loadmore'
			listData.value = [
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
			]
		},500)
	}
	
	// 选择商品
	const handleSelectGood = (item)=>{
		uni.navigateTo({
			url:'/pages/addGoods/addGoods?typeId='+type.value+'&id='+item.id
		})
	}
	
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	.search_wrap{
		height: 115rpx;
		padding: 0 20rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border-top: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		.input_wrap{
			flex: 1;
		}
		.input_btn{
			width: 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
		}
	}
	.content_wrap{
		display: flex;
		.type_list_wrap{
			width: 180rpx;
			min-height: 500px;
			.list{
				padding: 30rpx 10rpx;
				color: #848587;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				&::before{
					content: '';
					width: 6rpx;
					height: 24rpx;
					border-radius: 74rpx;
					background: transparent;
					display: block;
					margin-right: 10rpx;
				}
				&.active{
					background: #fff;
					&::before{
						// background: #F5564D;
						background: url(/static/common/select_type_active.png);
						background-size:contain;
					}
				}
			}
		}
		.goods_list_wrap{
			flex: 1;
		}
		.list_wrap{
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			.list{
				width: 267rpx;
				height: 343rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				margin-top: 10rpx;
				margin-left: 10rpx;
				.img{
					width: 267rpx;
					height: 240rpx;
				}
				.name{
					font-size: 24rpx;
					color: #333333;
					padding: 10rpx;
					font-weight: bold;
				}
				.za{
					font-size: 22rpx;
					color: #999999;
					padding: 0 10rpx;
				}
			}
		}
		.loading_wrap{
			padding: 20rpx 0;
		}
	}
</style>
